<template>
  <div class="app-container" style="padding: 5px;">
    <el-card>
        <div slot="header" class="clearfix">
            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">新媒体数据</span></center>
        </div>
        <el-table :data="xmtsjList" border stripe>
            <el-table-column label="" align="center" prop="name"></el-table-column>
            <el-table-column label="抖音1" align="center" prop="dy1">
                <template slot-scope="scope">
                    {{ scope.row.dy1==0?'':scope.row.dy1 }}
                </template>
            </el-table-column>
            <el-table-column label="抖音2" align="center" prop="dy2">
                <template slot-scope="scope">
                    {{ scope.row.dy2==0?'':scope.row.dy2 }}
                </template>
            </el-table-column>
            <el-table-column label="公众号" align="center" prop="gzh">
                <template slot-scope="scope">
                    {{ scope.row.gzh==0?'':scope.row.gzh }}
                </template>
            </el-table-column>
            <el-table-column label="活动" align="center" prop="hd">
                <template slot-scope="scope">
                    {{ scope.row.hd==0?'':scope.row.hd }}
                </template>
            </el-table-column>
            <el-table-column label="视频号" align="center" prop="sph">
                <template slot-scope="scope">
                    {{ scope.row.sph==0?'':scope.row.sph }}
                </template>
            </el-table-column>
            <el-table-column label="小红书" align="center" prop="xhs">
                <template slot-scope="scope">
                    {{ scope.row.xhs==0?'':scope.row.xhs }}
                </template>
            </el-table-column>
            <el-table-column label="转介绍" align="center" prop="zjs">
                <template slot-scope="scope">
                    {{ scope.row.zjs==0?'':scope.row.zjs }}
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-card style="margin-top: 5px;">
        <div slot="header" class="clearfix">
            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">平台粉丝数据</span></center>
        </div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="right">
            <el-form-item label="年月周" prop="mode">
                <el-radio-group v-model="queryParams.mode" size="small" @change="handleChange">
                    <el-radio v-for="(item, index) in modeList" :key="index" :label="item.value" border>{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年份" prop="year">
                <el-checkbox-group v-model="queryParams.years" @change="handleChange">
                    <el-checkbox v-for="(item, index) in yearList" :label="item.value" :key="index" border>{{ item.label }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="平台" prop="platform">
                <el-radio-group v-model="queryParams.platform" size="small" @change="handleChange">
                    <el-radio v-for="(item, index) in platList" :key="index" :label="item.value" border>{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div ref="chart" style="width: 100%;height: 500px;"></div>
    </el-card>
  </div>
</template>

<script>
import { listPlatFans,listPlatFansDict,listPlatFansSummary } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';
export default {
    name: "Xmtptfs",
    data() {
        return {
          xmtsjList: [],
          yearList: [],
          platList: [],
          modeList: [
            {
                value:"y",
                label:"年"
            },
            {
                value:"m",
                label:"月"
            },
            {
                value:"w",
                label:"周"
            }
          ],
          queryParams: {
            platform: null,
            mode: null,
            years: [],
          },
        }
    },
    created() {
        this.getPlatFans();
        this.getPlatFansDict();
    },
    mounted(){
        
    },
    methods: {
        handleChange(){
            this.getPlatFansSummary();
        },
        getPlatFans(){
            listPlatFans().then(res =>{
                this.xmtsjList = res.data;
            })
        },
        getPlatFansDict(){
            listPlatFansDict().then(res =>{
                this.yearList = res.data.yearList;
                this.queryParams.mode = "w";
                this.queryParams.years = res.data.years;
                this.platList = res.data.platList;
                this.queryParams.platform = res.data.platform;
                this.getPlatFansSummary();
            })
        },
        getPlatFansSummary(){
            if(this.queryParams.years.length==0){
                this.$modal.msgError("请选择年份");
                return false;
            }
            listPlatFansSummary(this.queryParams).then(res =>{
                const labels = [];
                if(res.data.length>0){
                    for(let i=0;i<res.data.length;i++){
                        labels.push(res.data[i].wkyear);
                    }
                }
                const chart = echarts.init(this.$refs.chart);
                const option = {
                     title: {
                        text: this.queryParams.platform,
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            return params[0].data.extraInfo
                        }
                    },
                    grid: {
                        height: '60%' // 设置内部图形的高度为容器高度的 70%
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: labels,
                        axisLabel: {
                            rotate: 45, // 设置 X 轴文字旋转角度
                            interval: 0, // 强制显示所有标签
                            fontSize: 12, // 文字大小
                            color: '#333' // 文字颜色
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: res.data.map(item => ({
                                value: item.fan_nums,
                                name: item.wkyear,
                                extraInfo: "时间: "+item.wkyear+"<br />平台名称: "+item.paltform+"<br />粉丝数: "+item.fan_nums+"<br/>环比增长: "+item.hb
                            })),
                            type: 'line',
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                formatter: '{c}' // 标签内容格式化为数据值
                            },
                        }
                    ]
                };
                chart.setOption(option);
            })
        },
    }
}
</script>